<script lang="ts" setup>
import { ref,inject } from "vue";
import { usePersonList } from "./PersonList";
import AddPerson from "./AddPerson.vue";
import EditPerson from "./EditPerson.vue";
import { roles } from "./PersonList"
import { deletePersonApi } from "@/api/person";
import { ElMessage, ElMessageBox } from "element-plus";
import eventBus from "@/utils/eventBus"

// 获取操作人员列表
const { persons, getPersonList } = usePersonList();

// 添加操作人员相关
const show = ref(false);
const okFn = () => {
  show.value = false;
  getPersonList();
}

// 订阅：（绑定事件）
// eventBus.subscribe(事件名,事件处理函数)
eventBus.subscribe("ok",okFn);//保存了 字符ok，和函数 okFn

// 删除：
const deletePerson = (adminid: string) => {
  ElMessageBox.confirm("亲，您真的要删除吗", 'Warning',
    {
      confirmButtonText: '真的',
      cancelButtonText: '点错了',
      type: 'warning',
    })
    .then(() => {
      deletePersonApi(adminid)
        .then((res: any) => {
          if (res.data.code === "200") {
            ElMessage({
              message:"删除成功！",
              type:"success" 
            });
            // 第一种：发送请求，

            // 第二种：删除前度数据
            let arr = persons.filter(item=>item.adminid!=adminid);
            persons.length=0;
            persons.push(...arr);
          }
        })
    })

}

// 修改操作人员相关
const showEdit = ref(false);

// 显示修改窗口
const editAdminname = ref<string>("");
const editShowFn=(adminname:string)=>{
  showEdit.value = true;
  // console.log("adminid",adminid);
  editAdminname.value = adminname;
}

const okEditFn=()=>{
    
  showEdit.value = false;

  getPersonList();
  
}

const title = inject("title","没有提供值");

</script>

<template>
  <el-button @click="show = true">添加操作人员</el-button>
  <p>title:{{title}}</p>
  <el-table :data="persons" style="width: 100%">
    <el-table-column label="编号" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.adminid }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="账号" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.adminname }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="角色" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ roles.filter(item => item.value == scope.row.role)[0]?.label }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="editShowFn(scope.row.adminname)">修改</el-button>
        <el-button size="small" type="danger" @click="deletePerson(scope.row.adminid)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-drawer v-model="show" title="添加操作人员" direction="rtl">
    
    <AddPerson></AddPerson>

  </el-drawer>
  <el-drawer v-model="showEdit" title="修改操作人员" direction="rtl">
    
    <EditPerson :adminname="editAdminname" @ok="okEditFn"  ></EditPerson>

    <input type="button" value="测试01" @click="clickFn" >
  </el-drawer>
</template>

<style lang="css" scoped></style>
